<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="MobileOptimized" content="320">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style"content="black-translucent">
	<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="format-detection" content="telephone=no" />
	<title>{$nickname} 的好声音录制间</title>
	<link rel="stylesheet" type="text/css" href="{MODULE_URL}template/mobile/audio/t1/css/base.css"/>	
	<link rel="stylesheet" type="text/css" href="{MODULE_URL}template/mobile/audio/t1/css/me.css?{php echo time()}"/>
	<script type="text/javascript" src="{MODULE_URL}template/mobile/audio/t1/js/zepto.js"></script>
	<script type="text/javascript">
				var sUserAgent = navigator.userAgent.toLowerCase();
				var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
				var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
				var bIsMidp = sUserAgent.match(/midp/i) == "midp";
				var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
				var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
				var bIsAndroid = sUserAgent.match(/android/i) == "android";
				var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
				var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
				window.onload = function(){
					var content = document.getElementById("content");
					var pcContent = document.getElementById("pc-content");
					var scan = document.getElementById("scan");
					var qrcode = document.getElementById("qrcode");
					if(!PCjudge()){
						content.style.display = "none";
						pcContent.style.display = "block";
						document.body.style.background = "#F4F4F4";
					}
					else{
						content.style.display = "block";
						pcContent.style.display = "none";
					}
				};
				function PCjudge(){
					if (bIsIpad || bIsIphoneOs) {
					} else if (bIsMidp || bIsUc7 || bIsUc || bIsAndroid) {
					} else if (bIsCE || bIsWM) {
					} else {
						return false;
					}
					return true;
				}				
			</script>
			<style type="text/css">
				#content{
					display: none;
				}
				#pc-content{
					width: 250px;
					height: 266px;
					margin:7% auto;
					display: none;
				}
				#qrcode{
					width: 250px;
					height: 250px;
					margin: auto;
					margin-top: 15%;
				}
				#scan{
					font-size: 25px;
					text-align: center;
					color: #504848;
				}
				#tip{
					width: 230px;
					height: 35px;
					font-size: 16px;
					margin: 20% auto;
					line-height:33px;
					text-align:center;
					color: #41F649;
					background-color:#fff;
					border-left: 3px #D9D9D9 solid;
					border-top: 3px #D9D9D9 solid;
					border-radius: 100px;
				}
				body {				
				 background-image: url({if empty($reply['voicebg'])}{MODULE_URL}template/mobile/audio/t/images/voicebg.jpg{else}{php echo toimage($reply['voicebg'])}{/if});
				  background-size: 100% auto;
				}
			</style>
		</head>
		<body>
		
			<div id="pc-content">
				<p id="scan">好声音录制间</p>
				<img id="qrcode"src="{$_W['attachurl']}qrcode_{$uniacid}.jpg?{php echo time()}"/>
				<div id='tip'>好声音录制间</div>
			</div>
			<div id="content">
				<div id="mask"></div>
				<nav class="tit" style=" color:#fff;   padding: 30px 0;  text-align: center;  font-size: 30px;">	
					好声音录制间
				</nav>
				<time id="time">
					&nbsp;
				</time>
				
				<section>
					<div class="hold-sound" id="holdSound" >
						<img src="{MODULE_URL}template/mobile/audio/t1/images/sp.gif" id="holdsay">
					</div>
					<div id="sound">
						<div id="aftersound">
							<img id="speak" src="{MODULE_URL}template/mobile/audio/t1/images/speechh.png"/>
							<span></span>
							<input type="hidden"/>
						</div>
					</div>
				</section>
				
				<section>
					<div id="record" >
						<img src="{MODULE_URL}template/mobile/audio/t1/images/voc.gif"/>
						<p class="record_info">手指上滑，取消发送</p>
						<!--松开手指，取消发送-->
					</div>
					<div id="slideRecord">
						<span class="iconfont" >&#xe600;</span>
						<p class="cancel-send" >松开手指，取消发送</p>
					</div>
					<div id="endtime">
						<span class="over" id="over">10</span>
						<p class="record_info" id="info" >手指上滑，取消发送</p>
					</div>
					<div class="shortRecord" id="shortRecord">
						<span class="over" >!</span>
						<p class="record_info">说话时间太短</p>
					</div>
				</section>
				
				<p class="again">重新录制</p>
				<footer id="mysay">
					按住　录制
				</footer>
				<footer id="nowShare">
					操作说明
				</footer>
				<div id="share" >  
					<div class="share-b">
						录音时间为1分钟<br />
						<i class="pengyouq">&#xe706;</i>
						<span>大小为2M</span>
					</div>
					<button id="share_cancel">知　道　了</button>
					<div id="myCenter_user"><span>我 的 中 心</span></div>
					
				</div>
			</div>			
			<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>

			<script type="text/javascript">
			var sound = document.getElementById("sound");
			var aftersound = document.getElementById("aftersound");
			var holdSound = document.getElementById("holdSound");
			var holdsay = document.getElementById("holdsay");
			var record = document.getElementById("record");
			var shortRecord = document.getElementById("shortRecord");
			var slideRecord = document.getElementById("slideRecord");
			var over = document.getElementById("over");
			var info = document.getElementById("info");
			var et = document.getElementById("endtime");
			var mysay = document.getElementById("mysay");
			var nowShare = document.getElementById("nowShare");
			var shareCancel = document.getElementById("share_cancel");
			var myCenteruser = document.getElementById("myCenter_user");
			var shareSend = document.getElementById("share_send");
			var intt = null;
			var endt = null;
			var t = null;
			var sendFlag = false;
			var touchStartY = null;
			var timeLimitFlag = false;
			var startVoiceFlag = false;
			var stopVoiceType = 0;
			var touchStartTime = null;
			var touchEndTime = null;
			var recordTime = 0;
			var stopTime = 0;
			var startTouch = false;
			var stopTouch = false;
			var shortClickId = null;
			var isRecord = false;
			var cycleTimes = 0;
			var jsApiList = ['checkJsApi', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'translateVoice', 'startRecord', 'stopRecord', 'onRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'showMenuItems', 'hideMenuItems', 'showOptionMenu', 'hideAllNonBaseMenuItem'];
			wx.config({
				debug: false,
				appId: "{$_W['account']['jssdkconfig']['appId']}",
			    timestamp: "{$_W['account']['jssdkconfig']['timestamp']}",
			    nonceStr: "{$_W['account']['jssdkconfig']['nonceStr']}", 
			    signature: "{$_W['account']['jssdkconfig']['signature']}",
				jsApiList: jsApiList
			});
			wx.ready(function() {
				wx.hideAllNonBaseMenuItem({
					success: function() {}
				});
				wx.showMenuItems({
					menuList: ['menuItem:share:timeline','menuItem:share:appMessage']
				});
				wx.hideMenuItems({
					menuList: ['menuItem:exposeArticl', 'menuItem:setFont', 'menuItem:refresh', 'menuItem:share:qq', 'menuItem:share:weiboApp', 'menuItem:favorite', 'menuItem:share:facebook', 'menuItem:copyUrl', 'menuItem:readMode', 'menuItem:openWithQQBrowser', 'menuItem:openWithSafari', 'menuItem:share:email']
				});
				wx.showOptionMenu();
				startRecord();
				stopRecordCycle();
				mysay.addEventListener("touchstart", nowTime, false);
				mysay.addEventListener("touchend", endTime, false);
				mysay.addEventListener("touchmove", slide, false);
				nowShare.addEventListener("touchstart", shareMy, false);
				shareCancel.addEventListener("touchstart", shareCan, false);
				myCenteruser.addEventListener("touchstart", myCenter, false);
				sound.addEventListener("touchstart", startVoice, false);
				wx.onVoiceRecordEnd({
					complete: function(a) {
						localId = a.localId
					}
				});
				wx.onVoicePlayEnd({
					complete: function(a) {
						startVoiceFlag = false;
						stopSay()
					}
				})
			});
			function say() {
				var a = document.getElementById("speak");
				a.src = "{MODULE_URL}template/mobile/audio/t1/images/speechg.gif"
			}
			function stopSay() {
				var a = document.getElementById("speak");
				a.src = "{MODULE_URL}template/mobile/audio/t1/images/speechh.png"
			}
			function nowTime(e) {
				isRecord = true;
				startTouch = true;
				cycleTimes = 0;
				e.preventDefault();
				sendFlag = false;
				timeLimitFlag = false;
				stopVoiceType = 0;
				touchStartY = e.touches[0].pageY;
				startRecord();
				mysay.style.background = "#0bbc0a";
				mysay.style.color = "#fff";
				mysay.innerHTML = "松开　结束";
				holdSound.style.display = "block";
				record.style.display = "block";
				intt = new Date;
				if (!t) {
					logTime()
				}
			}
			function logTime() {
				over.innerHTML = "10";
				t = setInterval(function() {
					var a = new Date;
					holdsay.style.visibility = "visible";
					console.log(a.getTime());
					if (a > (intt.getTime() + 49000)) {
						record.style.display = "none";
						if (slideRecord.style.display != "block") {
							et.style.display = "block";
							et.style.visibility = "visible"
						}
						timeLimitFlag = true;
						if (over.innerHTML != "0") {
							over.innerHTML -= 1
						}
						if (over.innerHTML == 0) {
							over.innerHTML = "!";
							info.innerHTML = "说话时间超长";
							setTimeout(function() {
								et.style.display = "none";
								record.style.display = "none";
								sendFlag = true;
								clearInterval(t);
								t = null;
								stopRecord(0)
							},
							1000)
						}
					}
				},
				1000)
			}
			function endTime() {
				startTouch = false;
				mysay.innerHTML = "按住　录制";
				if (!sendFlag) {
					mysay.style.display = "block";
					mysay.style.background = "#fff";
					mysay.style.color = "#0bbc0a"
				}
				et.style.visibility = "hidden";
				slideRecord.style.display = "none";
				if (sendFlag == true) {
					return
				}
				clearInterval(t);
				t = null;
				stopRecord(0)
			}
			function shareMy() {
				$("#share").addClass("share-open").css("display", "block");
				$("#mysay").css("visibility", "hidden")
			}
			function shareCan() {
				$("#share").removeClass("share-open");
				$("#mysay").css("visibility", "visible")
			}
			function myCenter() {
					window.location.href = "{php echo $this->createMobileUrl('tuser', array('tfrom_user'=>$from_user, 'rid' => $rid))}";
			}
			function cancelSend() {
				record.style.display = "none";
				slideRecord.style.display = "block"
			}
			function sendNode() {
				slideRecord.style.display = "none"
			}
			function stopRecord(d) {
				record.style.display = "none";
				wx.stopRecord({
					success: function(b) {
						isRecord = false;
						endt = new Date;
						var a = endt.getTime() - intt.getTime();
						recordTime = Math.ceil(a / 1000);
						var w = 55;
						var p = (115 / 60);
						var e = parseInt(a / 1000);
						var c = w + e * p;
						if (a < 1000) {
							shortTimeFunc()
						} else if (stopVoiceType != 1 || sendFlag) {
							et.style.visibility = "hidden";
							mysay.style.display = "none";
							sound.style.display = "block";
							holdSound.style.display = "none";
							slideRecord.style.display = "none";
							stopTime = getDate("url");
							$("#time").text(getDate("time"));
							$("#time").css("visibility", "visible");
							aftersound.style.width = c + 'px';
							$("#aftersound span").text(recordTime + "′′");
							localId = b.localId;
							shareFunc()
						} else {
							holdSound.style.display = "none"
						}
					},
					fail: function(a) {
						isRecord = false;
						shortTimeFunc()
					}
				})
			}
			function slide(e) {
				if (sendFlag) {
					return
				}
				e.preventDefault();
				var y = e.touches[0].pageY;
				if (touchStartY - y >= 50 && !sendFlag) {
					stopVoiceType = 1;
					et.style.display = "none";
					et.style.visibility = "hidden";
					record.style.display = "none";
					slideRecord.style.display = "block"
				} else {
					stopVoiceType = 0;
					slideRecord.style.display = "none";
					if (timeLimitFlag) {
						et.style.display = "block";
						et.style.visibility = "visible"
					} else {
						record.style.display = "block"
					}
				}
			}
			function startVoice() {
				var a = localId;
				if (startVoiceFlag) {
					wx.stopVoice({
						localId: a
					});
					startVoiceFlag = false;
					stopSay();
					return
				}
				say();
				startVoiceFlag = true;
				var a = localId;
				wx.playVoice({
					localId: a
				})
			}
			function startRecord() {
				wx.startRecord({
					cancel: function() {}
				})
			}
			function shareFunc() {
				var c = document.getElementById("share");
				wx.uploadVoice({
					localId: localId,
					success: function(b) {
					    nowShare.style.display = "block";
						wx.onMenuShareTimeline({
							title: recordTime + "′′",
							link: "{$_W['siteroot']}/app/{php echo $this->createMobileUrl('play', array('rid' => $rid))}&serverId=" + b.serverId + "&date=" + stopTime + "&recordtime=" + recordTime,
							imgUrl: "{$_W['siteroot']}/addons/fm_photosvote/template/mobile/images/sharetimeline.jpg",
							trigger: function(a) {},
							success: function(a) {},
							cancel: function(a) {},
							fail: function(a) {}
						});
						wx.onMenuShareAppMessage({
							title: '我给你发了一条语音！', // 分享标题
							desc: recordTime + "′′", // 分享描述
							link: "{$_W['siteroot']}/app/{php echo $this->createMobileUrl('play', array('rid' => $rid));}&serverId=" + b.serverId + "&date=" + stopTime + "&recordtime=" + recordTime, // 分享链接
							imgUrl: "{$_W['siteroot']}/addons/fm_photosvote/template/mobile/images/sharetimeline.jpg", // 分享图标
							trigger: function(a) {},
							success: function(a) {},
							cancel: function(a) {},
							fail: function(a) {}
						});	
						 $.ajax({
							url:"{php echo $_W['siteroot'].'app/'.$this->createMobileUrl('saverecord1',array('rid'=>$rid, 'from_user' => $from_user),1);}",
								//dateType:"jsonp",
								type:"POST",
								data:{serverId:b.serverId,timeLength:recordTime}
							}).done(function(data){
								if(data && data.ret === 0){
									var serverId = data.serverId;
									//alert(data.keyid);					    
								}else {
									//失败
									alert("语音保存失败，请重新录制!");
								}						 
							});
					}
				});
			}
			function stopRecordCycle() {
				setInterval(function() {
					isRecord = (startTouch ? 0 : isRecord ? cycleTimes++:0) > 3 ? false: isRecord;
					if (!startTouch && !isRecord) {
						wx.stopRecord({
							success: function(a) {},
							fail: function(a) {}
						})
					}
				},
				1000)
			}
			function shortTimeFunc() {
				if (shortClickId != null) {
					return
				}
				shortRecord.style.display = "block";
				shortClickId = setTimeout(function() {
					shortRecord.style.display = "none";
					holdSound.style.display = "none";
					shortClickId = null
				},
				1000)
			}
			$(document).ready(function() {
				$(document).on('touchstart',
				function(e) {
					e.preventDefault()
				});
				$(document).on('touchmove',
				function(e) {
					e.preventDefault()
				});
				$(document).on('touchend',
				function(e) {
					e.preventDefault()
				});
				$(".again").on("touchstart",
				function() {
					window.location.reload(true)
				})
			});	
			function replaceAll(str, oldChar, newChar) {
				var oldStr = str;
				var newStr = oldStr;
				do {
					oldStr = newStr;
					newStr = newStr.replace(oldChar, newChar)
				} while ( oldStr != newStr );
				return newStr
			};
			function getQueryString(url, name) {
				var reg = new RegExp(name + "=(:*[\-_0-9A-Za-z]*)*(:/)*(/[0-9A-Za-z]*)*", "gi");
				var res = url.substring(1).match(reg) + "";
				res = res.substring(res.indexOf("=") + 1, res.length);
				return res
			};
			function controlSize(str) {
				str = str + "";
				var rge = new RegExp("[0-9]{2}", "gi");
				if (str.match(rge) == null) {
					return "0" + str
				};
				return str
			};
			function getDate(type) {
				var dateObj = new Date();
				var date = null;
				if (type == "time") {
					var hour = controlSize(dateObj.getHours());
					var min = controlSize(dateObj.getMinutes());
					date = hour + ":" + min
				};
				if (type == "url") {
					var month = dateObj.getMonth();
					var day = dateObj.getDate();
					var week = dateObj.getDay();
					var mill = dateObj.getTime();
					var hour = dateObj.getHours();
					var min = dateObj.getMinutes();
					date = month + ":" + day + ":" + hour + ":" + min + ":" + week + ":" + mill
				};
				return date
			}
			</script>
		</body>
</html>